{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}{% endblock %}

{% block css %}
    <style>
    .title{
        border-right: 1px solid gray;
        min-height: 600px;/* 最小高度，当高度超过600时，高度会按照内容高度来，不会溢出 */


    }
    .content{
        border-left: 1px solid gray;
        min-height: 400px;
        margin-left: -1px;
    }
    .panel-body{
        padding: 0;
    }
    .content-right{
        margin-top: 50px;
        text-align: center;
    }
    </style>

    <link rel="stylesheet" href="{% static 'plugins/editor.md-master/css/editormd.preview.min.css' %}">
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default">
          <div class="panel-heading clearfix">
              <div class="pull-left">

                  <i class="fa fa-book"></i> wiki文档
              </div>
              <div class="pull-right">
                  {% if wiki_obj %}
                  <a href="{% url 'wiki_delete' request.tracer_obj.project.id wiki_obj.id %}" class="btn btn-danger btn-xs">
                      <i class="fa fa-remove"></i> 删除
                  </a>

                  <a href="{% url 'wiki_edit' request.tracer_obj.project.id wiki_obj.id %}" class="btn btn-warning btn-xs">
                      <i class="fa fa-pencil"></i> 编辑
                  </a>
                  {% endif %}
                  <a href="{% url 'wiki_add' request.tracer_obj.project.id %}" class="btn btn-success btn-xs">
                      <i class="fa fa-plus-circle"></i> 新建
                  </a>
              </div>

          </div>
          <div class="panel-body">
            <div class="row">
                <div class="col-xs-3 title">
                    <ul id="catalog">

                    </ul>

                </div>
                <div class="col-xs-9 content">
                    {% if wiki_obj %}
                        <div id="previewmarkdown">
                            <textarea>
                                {{ wiki_obj.content }}
                            </textarea>
                        </div>
                    {% else %}
                        <div class="content-right">
                        <div>《{{ request.tracer_obj.project.name }}》wiki文档库</div>
                        <div>
                            <a style="font-size: 12px;" href="{% url 'wiki_add' request.tracer_obj.project.id %}"><i class="fa fa-plus-circle"></i> 新建文章</a>
                        </div>
                    </div>
                    {% endif %}


                </div>
            </div>
          </div>
        </div>


    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/editor.md-master/editormd.min.js' %}"></script>

    <script src="{% static 'plugins/editor.md-master/lib/marked.min.js' %}"></script>


    <script src="{% static 'plugins/editor.md-master/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugins/editor.md-master/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugins/editor.md-master/lib/raphael.min.js' %}"></script>
      <script src="{% static 'plugins/editor.md-master/lib/sequence-diagram.min.js' %}"></script>


    <script src="{% static 'plugins/editor.md-master/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugins/editor.md-master/lib/jquery.flowchart.min.js' %}"></script>

    <script>
    $(function(){
        initCatalog();
        initPreviewMarkdown();
    });

    function initPreviewMarkdown() {
        editormd.markdownToHTML('previewmarkdown',{
            htmlDecode: "style,script,iframe", //防xss攻击等
        })
    }


    var WIKI_URL = "{% url 'wiki' request.tracer_obj.project.id %}";
    function initCatalog() {
        $.ajax({
            url: '{% url "wiki_catalog" request.tracer_obj.project.id %}',
            type:'get',
            success:function (res) {
                console.log(res);
                if (res.status){
                    var ulEle = $('#catalog');
                    //[
                    //
                    // {id: 1, title: "水浒传2", parent_id: null},
                    //
                    // {id: 4, title: "三英战吕布", parent_id: null},
                    // {id: 5, title: "谢晨的一角", parent_id: 4}
                    //
                    // ]
                    $.each(res.data, function (index,value) {
                        console.log(res.data);
                        var url = WIKI_URL + '?wiki_id=' + value.id;
                        var liEle = $('<li>').attr('id','id_'+value.id).html(`<a href=${url}>${value.title}</a>`).append($('<ul>'));

                        if (!value.parent_id){

                            ulEle.append(liEle);
                        }
                        else {
                            $('#id_'+value.parent_id).children('ul').append(liEle)
                        }

                    })

                }
                else {
                    alert('初始化目录失败！');
                }

            }



        })

    }

    </script>



{% endblock %}

